<template>
    <div class="app-container">

        <el-row :gutter="20">
            <!--部门数据-->
            <el-col :span="4" :xs="24">

                <div class="head-container">
                    <el-tree
                        ref="courseTreeRef"
                        class="tree"
                        :data="courseOptions"
                        :props="{ label: 'name', children: 'children' }"
                        :expand-on-click-node="false"
                        node-key="id"
                        highlight-current
                        default-expand-all
                        @nodeClick="handleNodeClick"
                    />
                </div>
            </el-col>

            <!--试题数据-->
            <el-col :span="20" :xs="24">
            </el-col>

        </el-row>


    </div>
</template>

<script lang="ts" setup>
import {IHooksOptions} from '@/hooks/hooksinterface';
import {useCrud} from '@/hooks/hooksservice';
import { ref, reactive,  getCurrentInstance, ComponentInternalInstance,nextTick} from 'vue';
import { ElTree } from 'element-plus';
import {courseTreeApi} from '@/api/app/course/course';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const courseTreeRef = ref<InstanceType<typeof ElTree>>();
const courseOptions = ref(undefined);

//定义接口，后台请求的API，以及查询条件的表单对象
const state: IHooksOptions = reactive({
    queryApi: undefined,
 	deleteApi: undefined,
    exportApi: undefined,
    createdIsNeed:false,
 	//主键名称
 	primaryKey:'id',
 	queryParams:  {
 		page:1,
 		size:10,
        subjectId:-1,
        courseId:0,
    }
});

//vue3中叫组合式函数
const { getDataList,  selectionChangeHandle,  sortChangeHandle, resetQuery,deleteHandle, deleteBatchHandle }=useCrud(state);

/** 节点单击事件 */
function handleNodeClick(data: any) {
    if(data.subjectId===-1){
        state.queryParams.subjectId = data.id;
        state.queryParams.courseId = -1;
    }else{
        state.queryParams.subjectId = data.subjectId;
        state.queryParams.courseId = data.id;
    }

    console.log(state.queryParams);
    // handleQuery();
}

//加载树型节点
function initCourseTree(){
    courseTreeApi().then(resp=>{
        console.log(resp);
        courseOptions.value=resp.data;
    });
}

initCourseTree();

</script>

<style lang="scss" scoped>
    .tree{
        font-size: 16px;
    }
</style>
